<!DOCTYPE html>
<html>

<head>
    <title>AR.js A-Frame</title>


    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

    <script type='text/javascript' src='aframe-ar.js'></script>

    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/camera_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/control_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/drawing_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/holistic.js" crossorigin="anonymous"></script>



</head>

<body>
    <a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: true'
        renderer='antialias: true; alpha: false' cursor='rayOrigin: mouse' raycaster='near: 0; far:10000'>

        <a-camera gps-new-camera='gpsMinDistance: 2'></a-camera>
    </a-scene>


    <!-- <video id="video" src=""></video> -->
    <script>
        // 重要1：好像只能在 a-camera  中 挂载组件
        let baseMap = {
            x: 0,
            y: 0,
            z: 0
        }
        const el = document.querySelector("[gps-new-camera]");
        el.addEventListener("gps-camera-update-position", e => {
            const properties = {
                color: 'red',
                // 距离我前面的距离，值越小离我越近，
                // lon 就是横向偏移的距离
                latDis: 0.001,
                lonDis: 0.0001,
                scale: {
                    x: 20,
                    y: 20,
                    z: 20
                }
            };
            const entity = document.createElement("a-box");
            entity.setAttribute("scale", properties.scale);
            entity.setAttribute("id", "helloworld1");


            entity.setAttribute('gps-new-entity-place', {
                latitude: e.detail.position.latitude + properties.latDis,
                longitude: e.detail.position.longitude + properties.lonDis
            });


            //简单写一下 位置 
            entity.setAttribute('position', {
                x: 0,
                y: 10,
                z: 0
            });

            baseMap.x = e.detail.position.longitude + properties.lonDis
            baseMap.z = e.detail.position.latitude + properties.latDis,
                entity.setAttribute('clicker', {});
            document.querySelector("a-scene").appendChild(entity);

        });



        console.log(document.querySelector("video"))



        const videoElement = document.querySelector("video")

        function onResults(results) {
            //    
            // interface result {
            //    leftHandLandmarks?:Array<result_base>
            //    rightHandLandmarks?:Array<result_base>
            //    faceLandmarks?:Array<result_base>
            //    poseLandmarks?:Array<result_base>
            // }
            try {
                let plus = (results.leftHandLandmarks[8].x - 0.5)
                let tempLatitude = document.querySelector("#helloworld1").getAttribute("gps-new-entity-place").latitude
                let tempLongitude = document.querySelector("#helloworld1").getAttribute("gps-new-entity-place").longitude
                document.querySelector("#helloworld1").setAttribute("gps-new-entity-place", {
                    latitude:  baseMap.z + (results.leftHandLandmarks[8].z) * 0.01,
                    longitude: baseMap.x + plus * 0.01
                })
                // document.querySelector("#helloworld1").setAttribute("position", {
                //     // x: 0,
                //     y: results.leftHandLandmarks[8].y,
                //     // z: 0
                // })
                console.log(temp)
            } catch {

            }

        }

        const holistic = new Holistic({
            locateFile: (file) => {
                console.log(file, "file")
                return `https://cdn.jsdelivr.net/npm/electroluxasset/mediapipe/holistic/locate/${file}`;
            }
        });
        holistic.setOptions({
            modelComplexity: 1,
            smoothLandmarks: true,
            enableSegmentation: true,
            smoothSegmentation: true,
            refineFaceLandmarks: true,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });
        holistic.onResults(onResults);

        const camera = new Camera(videoElement, {
            onFrame: async () => {
                await holistic.send({ image: videoElement });
            },
            width: 1280,
            height: 720
        });

        // document.querySelector("video").oncanplay=()=>{

        // }
        camera.start();



        // 操作aframe 的物体示例
        // setInterval(()=>{
        //     let tempLatitude = document.querySelector("#helloworld1").getAttribute("gps-new-entity-place").latitude
        //     let tempLongitude = document.querySelector("#helloworld1").getAttribute("gps-new-entity-place").longitude
        //     document.querySelector("#helloworld1").setAttribute("gps-new-entity-place",{
        //         latitude: tempLatitude,
        //         longitude: tempLongitude+0.001
        //     })
        //     console.log(temp)
        //     // .latDis = document.querySelector("#helloworld1").latDis+0.001
        // },1000)
    </script>



    <script>
        // 点击事件
        AFRAME.registerComponent("clicker", {
            init: function () {
                this.el.addEventListener("click", e => {
                    // alert("电导率")
                    const dist = this.el.components["gps-new-entity-place"].distance;
                    alert(dist === undefined ? "Please move to a new location to obtain the distance" : `This object is ${dist} metres away.`);
                });
            }
        });
    </script>

    <script>
        console.log(document.querySelectorAll("video"))
    </script>
</body>

<!-- 

 -->

</html>